<template>
  <div class="home">
    <input type="text" v-model="num" />
    {{ msg }}
    <br />
    {{ types }}
    {{ nickname }}
    <br />
    <button @click="handleChange">确定</button>
    <button @click="stopWatch">停止监听</button>
    <button @click="getDom">GET dom</button>
    <br>
    <button ref="fontNode" @click="getDom">获取dom121</button>
    <el-button>fds</el-button>
    <el-input v-model="form.testNum" placeholder="测试"></el-input>
    <el-button @click="submit">登录</el-button>
    <div class="box">
      <div class="box-bg"></div>
    </div>
    <hr>
    <label for="">文件：
      <input type="file" @change="handleFileChange">
    </label>
    <label for="">
      下载文件呢
      <el-button @click="hanldeLoad">开始</el-button>
    </label>
    
  </div>
</template>

<script lang="ts">
import axios from '../api/index'
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  toRefs,
  watch,
} from "vue";
export default defineComponent({
  name: "Home",
  setup() {
    const form = reactive({
      testNum: 2
    })
    const msg = reactive([
        { id: 1, name: "vue" },
        { id: 2, name: "react" },
      ]),
      state = reactive({
        types: [{ id: 1, name: "app" }],
        nickname: "111",
      }),
      num = ref(0),
      fontNode = ref<HTMLDivElement | null>(null),
      instance = getCurrentInstance();

    console.log("instance", instance?.appContext.config.globalProperties);

    const stopWatchRoom = watch(
      [num, msg],
      ([curAge, newVal], [newOld, curOld]) => {
        console.log(curAge, newVal);
        console.log(newOld, curOld);
      }
    );

    function handleChange() {
      let ary = { id: 3, name: "vuex" };
      msg.push(ary);
      num.value++;
    }

    function stopWatch() {
      stopWatchRoom();
    }

    function getDom() {
      console.log(fontNode.value);
    }

    function submit() {
      console.log(form)
    }

    function handleFileChange(e: any) {
      console.log(e.target.files[0])
      fetch('nd/upload', e.target.files[0]).then(res => {
        console.log(res, 99)
      })
      
    }
    // 下载文件
    function hanldeLoad() {
      // fetch('nd/downloadExcel').then(res => {
      //   console.log(res,23)
      // })
      // window.fetch('/nd/up', {method: 'get'}).then(res => {
      //   console.log(res)
      // })
      axios.get('/nd/up').then((res:any) => {
        console.log(res)
      })
    }

    onMounted(() => {
      console.log(fontNode.value, 1);
      // console.log(window.idmApp, 999)
    });

    return {
      hanldeLoad,
      handleFileChange,
      handleChange,
      stopWatch,
      getDom,
      form,
      submit,
      num,
      msg,
      fontNode,
      ...toRefs(state),
    };
  },
  mounted() {
    let root: any = this.$root
    console.log("mounted", root.count, this.fontNode);
  },
  created() {
    console.log("created");
  },
});
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  height: 100vh;
  width: 100%;
}
.box{
  width: 400px;
  height: 400px;
  border: 1px solid #eee;
  position: relative;
  .box-bg{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    z-index: 0;
    opacity: 0.9;
    pointer-events: none;
    background-repeat: repeat;
    mix-blend-mode: multiply;
    background-image: url('')
  }
}
</style>
